<template>
		<view class="list" :style="{gridTemplateColumns: `repeat(${lineNum},1fr)`}" >
			<view class="item"  v-for="icon_item in data">
				<view class="item_box" :style="{opacity:showimg?'1':'0'}" @tap="tap_item(icon_item)">
					<image :src="icon_item.icon" mode="widthFix"></image>
					<view v-if="icon_item.name">{{icon_item.name}}</view>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
			props: {
				/**
				 * 每行显示几个按钮
				 */
				lineNum: {
					type: Number,
					default: 4
				},
				/**
				 * 按钮数组
				 * [{icon:'按钮图片地址',name:'按钮标题文字/可不写'}]
				 */
				data: {
					type: Array,
					default: []
				}
			},
			data() {
				return {
					showimg: false,
				};
			},
			created() {
				// 解决图片不设置高度导致的页面跳动
				setTimeout(() => {
					this.showimg = true
				}, 800)
			},
			methods: {
				tap_item(item) {
					this.$emit('change',item)
				}
			}
		}
</script>

<style lang="scss">
	.list {
		display: grid;
		.item {
			.item_box {
				display: flex;
				flex-direction: column;
				padding: 30rpx;
				align-items: center;
				transition: 0.2s;
				background-color: green;
				height: 100rpx;
				image {
					width: 100%;
					transition: 0.3s;

					&:active {
						transform:scale(0.9);
						opacity: 0.7;
					}
				}

				view {
					color: #2B2F33;
					font-size: 14px;
					text-align: center;
					margin-top: 10rpx;
					white-space: nowrap
				}
			}
		}

	}
</style>